<template>
	<view class="container">
		<view class="solid-bottom bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold">
				联系人
			</view>
			<input type="text" value="" v-model="contactName" class="text-13 flex-treble" placeholder="请填写联系人姓名" />
		</view>
		<view class="solid-bottom bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold">
				联系电话
			</view>
			<input type="number" v-model="contactMobile" value="" class="text-13 flex-treble" placeholder="请填写联系电话" />
		</view>
		<view class="solid-bottom text-13 flex justify-between align-center padding bg-white">
			<view class="text-333 text-bold">
				施工地址
			</view>
			<view class="flex justify-start align-center" @click="chooseAddress">
				<view class="text-767696 margin-right-xs">
					{{addressName}}
				</view>
				<image :src="baseUrl + '/static/right.png'" mode="" style="width: 22rpx;height: 22rpx;"></image>
			</view>
		</view>
		<view class="margin-bottom-sm bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold">
				详细地址
			</view>
			<input type="text" value="" v-model="address" class="text-13 flex-treble" placeholder="详细地址，例1号楼1层1001室" />
		</view>
		<!-- <view class="solid-bottom text-13 flex justify-between align-center padding bg-white">
			<view class="text-333 text-bold">
				屏幕品牌
			</view>
			<view class="flex justify-start align-center" @click="showModal()">
				<view class="text-767696 margin-right-xs">
					{{brandName}}
				</view>
				<image :src="baseUrl + '/static/right.png'" mode="" style="width: 22rpx;height: 22rpx;"></image>
			</view>
		</view>
		<view class="solid-bottom bg-white text-13 flex justify-between align-center padding">
			<view class="flex justify-start align-center">
				<view class="text-bold text-333 margin-right">
					宽(cm)
				</view>
				<input type="number" v-model="width" value="" class="text-13" style="width: 180rpx;"
					placeholder="请填写物品宽度" />
			</view>
			<view class="flex justify-start align-center">
				<view class="text-bold text-333 margin-right">
					高(cm)
				</view>
				<input type="number" v-model="height" value="" class="text-13" style="width: 180rpx;"
					placeholder="请填写物品高度" />
			</view>
		</view>
		<view class="solid-bottom bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold">
				数量
			</view>
			<input type="number" value="" v-model="count" class="text-13 flex-treble" />
		</view>
		<view class="solid-bottom bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold">
				有无静电地板
			</view>
			<radio-group class="flex-treble flex justify-center align-center" @change="RadioChange1">
				<view class="flex justify-start align-center">
					<radio class="radio yellow" :class="floorType=='1'?'bg-white':''"
						:checked="floorType=='1'?true:false" value="1"></radio>
					<view class="title text-13 margin-left-xs">有</view>
				</view>
				<view class="flex justify-start align-center" style="margin-left: 120rpx;">
					<radio class="radio yellow" :class="floorType=='0'?'checked':''"
						:checked="floorType=='0'?true:false" value="0"></radio>
					<view class="title text-13 margin-left-xs">无</view>
				</view>
			</radio-group>
		</view>
		<view class="margin-bottom-sm bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold">
				墙壁是否承重
			</view>
			<radio-group class="flex-treble flex justify-center align-center" @change="RadioChange">
				<view class="flex justify-start align-center">
					<radio class="radio yellow" :class="wallType=='1'?'bg-white':''" :checked="wallType=='1'?true:false" value="1"></radio>
					<view class="title text-13 margin-left-xs">是</view>
				</view>
				<view class="flex justify-start align-center" style="margin-left: 120rpx;">
					<radio class="radio yellow" :class="wallType=='0'?'checked':''" :checked="wallType=='0'?true:false"
						value="0"></radio>
					<view class="title text-13 margin-left-xs">否</view>
				</view>
			</radio-group>
		</view> -->
	<view class="solid-bottom text-13 flex justify-between align-center padding bg-white">
		<view class="text-333 text-bold">
			预约看现场时间
		</view>
		<view class="flex justify-start align-center" @click="onCancel(1)">
			<view class="text-767696 margin-right-xs">
				{{watchTime}}
			</view>
			<image :src="baseUrl + '/static/right.png'" mode="" style="width: 22rpx;height: 22rpx;"></image>
		</view>
	</view>
<!-- 	<view class="solid-bottom text-13 flex justify-between align-center padding bg-white">
		<view class="text-333 text-bold">
			安装时间
		</view>
		<view class="flex justify-start align-center" @click="onCancel(2)">
			<view class="text-767696 margin-right-xs">
				{{installTime}}
			</view>
			<image :src="baseUrl + '/static/right.png'" mode="" style="width: 22rpx;height: 22rpx;"></image>
		</view>
	</view> -->
	<view class="solid-bottom bg-white text-13 flex justify-between align-center padding">
		<view class="text-333 flex-sub text-bold">
			详细描述
		</view>
		<input type="text" value="" v-model="description" class="text-13 flex-treble" placeholder="在这里描述下您的需求" />
	</view>
	<view class="cu-form-group padding-top">
		<view class="grid col-3 grid-square flex-sub">
			<view class="bg-img" v-for="(item,index) in descriptionPic" :key="index">
				<image :src="item" mode="aspectFill"></image>
				<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
					<text class='cuIcon-close'></text>
				</view>
			</view>
			<view class="solids" @tap="ChooseImage" v-if="descriptionPic.length<3">
				<text class='cuIcon-cameraadd'></text>
			</view>
		</view>
	</view>
	<view class="flex justify-start align-center padding text-sm">
		<view class="flex justify-start align-center" @click="changeType">
			<image v-if="is_agree" :src="baseUrl + '/static/selected.png'" mode=""
				style="width: 26rpx; height: 26rpx"></image>
			<image v-else :src="baseUrl + '/static/unselected.png'" mode="" style="width: 26rpx; height: 26rpx">
			</image>
			<text class="text-333 margin-left-xs">同意并认真阅读</text>
		</view>
		<text class="color" @click="toPage('/filePage/pages/protocol/protocol?title=佐佑帮信息发布协议&code=PROTOCOL_INFO_PUBLISH&type=4')">《佐佑帮信息发布协议》</text>
	</view>
	<view class="" style="padding:58rpx 20rpx;">
		<button @click="submit" class="bg-color text-15 padding radius10 text-center text-white"
		>确认发布</button>
	</view>
	
		<w-picker
		        :visible.sync="visible"
		        mode="date" 
		        startYear="2021" 
		        endYear="2100"
		        :current="true"
		        fields="second"
		        @confirm="onConfirm($event)"
		        @cancel="visible=false"
		        :disabled-after="false"
		        ref="date" 
		    />	
			<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''" @click="hideModal()">
				<view class="cu-dialog">
					<view class="cu-bar bg-white justify-between">
						<view class="action text-green"></view>
						<view class="text-221815 text-17">
							选择屏幕品牌
						</view>
						<view class="action text-blue" @tap="hideModal">取消</view>
					</view>
					<scroll-view scroll-y="true" style="height: 200rpx;">
						<view class="flex justify-between align-center padding solid-bottom" v-for="item in brandList" @click="cheacked(item)">
							<view class=" flex justify-between align-center f-grow1">
							<view class="text-xl text-221815">
								{{item.brandName}}
							</view>
						<!-- 	<view class="text-sm text-999">
								{{item.worktype}}
							</view> -->
						</view>
						<image v-if="brand==item.brandId" :src="baseUrl + '/static/selected.png'" mode="" class="margin-left margin-right-sm" style="width: 26rpx;height: 26rpx;"></image>
						<image v-else :src="baseUrl + '/static/unselected.png'" mode="" class="margin-left margin-right-sm" style="width: 26rpx;height: 26rpx;"></image>
						</view>
						
					</scroll-view>
				</view>
			</view>
			</view>
	
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.$config.baseUrl,
				descriptionPic: [],
				wallType: 1,
				is_agree: false,
				addressLatitude: '',
				addressLongitude: '',
				address: '',
				addressName: '请选择',
				contactMobile: '',
				contactName: '',
				count: '',
				description: '',
				height: '',
				installTime: '请选择',
				watchTime: '请选择',
				width: '',
				floorType: 1,
				visible:false,
				timeType:'',
				brand:'',
				brandName:'请选择',
				brandList:[],
				modalName:null
			};
		},
		onLoad() {
			this.getBrandList()
		},
		methods: {
			async ChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// console.log(res)
						this.$upload(res.tempFilePaths[0]).catch(req => {
							this.descriptionPic.push(req.data)
						})
					}
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.descriptionPic.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			toPage(url) {
				this.$util.openNewPage(url)
			},
			RadioChange1(e) {
				this.floorType = e.detail.value
			},
			RadioChange(e) {
				this.wallType = e.detail.value
			}
			,
			chooseAddress() {
				let that = this
				// #ifdef  APP-PLUS
				uni.navigateTo({
					url: "/pagesA/pages/chooseLocation/chooseLocation?big=1",
					animationType: "slide-in-bottom",
				})
				// #endif
				// #ifdef  MP-WEIXIN
				uni.chooseLocation({
					success: function(res) {
						// console.log('位置名称：' + res.name);
						// console.log('详细地址：' + res.address);
						// console.log('纬度：' + res.latitude);
						// console.log('经度：' + res.longitude);
						that.addressName = res.name
						that.address = res.address
						that.addressLatitude = res.latitude
						that.addressLongitude = res.longitude
					}
				});
				// #endif
			},
			async submit() {
				if (!this.is_agree) {
					this.$util.msg('未同意发布协议')
					return
				}
				 if(!this.contactName){
				 	return this.$util.msg('联系人不能为空')
				 }
				 if(!this.contactMobile){
					 return this.$util.msg('联系电话不能为空')
				 }
				 if(!this.addressLatitude){
					 return this.$util.msg('施工地址不能为空')
				 }
				  if(!this.address){
					  return this.$util.msg('详细地址不能为空')
				  }
				  // if(!this.brand){
					 //  return this.$util.msg('屏幕品牌不能为空')
				  // }
				  // if(!this.width){
					 //  return this.$util.msg('宽不能为空')
				  // }
				  // if(!this.height){
					 //  return this.$util.msg('高不能为空')
				  // }
				  // if(!this.count){
					 //  return this.$util.msg('数量不能为空')
				  // }
				
				  if(this.watchTime=='请选择'){
					  return this.$util.msg('预约时间不能为空')
				  }
				  // if(this.installTime=='请选择'){
					 //  return this.$util.msg('安装时间不能为空')
				  // }
				  if(!this.description){
					  return this.$util.msg('详细描述不能为空')
				  }
				  if(this.descriptionPic.length==0){
					  return this.$util.msg('图片不能为空')
				  }
				    const [err, res] = await this.$post(this.$api.orderService_addOrderScreen, {
					address: this.address,
					contactMobile: this.contactMobile,
					// brand:this.brand,
					// count: this.count,
					contactName: this.contactName,
					addressLatitude: this.addressLatitude,
					addressLongitude: this.addressLongitude,
					floorType: this.floorType,
					descriptionPic: this.descriptionPic,
					// height: this.height,
					watchTime: this.watchTime,
					// installTime: this.installTime,
					wallType:this.wallType,
					// width:this.width,
					description:this.description
				})
				if (res) {
					this.$util.msg(res.message)
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
					// console.log(res)

				}
			},
			changeType() {
				this.is_agree = !this.is_agree
			},
			onCancel(e){
				this.visible = !this.visible
				if(e){
					this.timeType = e
				}
			},
			onConfirm(e){
				// console.log(e)
				if(this.timeType==1){
					this.watchTime = e.result
				}else{
					this.installTime = e.result
				}
			},
			showModal() {
				this.modalName = 'bottomModal'
			},
			hideModal() {
				this.modalName = null
			},
			async getBrandList() {
				const [err, res] = await this.$get(this.$api.orderService_listScreenBrand)
				if (res) {
					this.brandList = res.data
					// console.log(res)
					
				}
			},
			cheacked(e){
				this.hideModal()
				this.brand = e.brandId
				this.brandName = e.brandName
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
